import React from 'react'
import clsx from 'clsx'
import styles from './styles.module.css'
import wechatGroupQR from '/static/img/polyos-wechat-group.png'
import logo from '/static/img/polyos-logo.png'
import Translate, { translate } from '@docusaurus/Translate'
export default function Communitypage(): React.JSX.Element {
  return (
    <header className={clsx('hero shadow--lw', styles.heroBanner)}>
      <div className="container">
        <div className="row">
          <div className={clsx('col col--6', styles.center)}>
            <h1 className="hero__title">
              <Translate
                id="component.community.Communitypage.title"
                description="the title of Community page">
                Connect with us
              </Translate>
            </h1>
            <p className="hero__subtitle">
              <Translate
                id="component.community.Communitypage.subtitle"
                description="the subtitle of Community page">
                We are glad to chat with you
              </Translate>
            </p>
          </div>
          <div className={clsx('col col--5')}>
            <div className="card">
              <div className="card__header">
                <div className="avatar">
                  <img className="avatar__photo" src={logo} />
                  <div className="avatar__intro">
                    <div className="avatar__name">
                      <Translate
                        id="component.community.Communitypage.card.polyos.text"
                        description="the text below of PolyOS logo used in Community page card">
                        PolyOS
                      </Translate>
                    </div>
                    <small className="avatar__subtitle">
                      <Translate
                        id="component.community.Communitypage.card.polyos.subtext"
                        description="the subtext below of PolyOS logo used in Community page card">
                        Our WeChat Group
                      </Translate>
                    </small>
                  </div>
                </div>
              </div>
              <div
                className={clsx('card__image', styles.image)}
                style={{ alignSelf: 'center' }}>
                <img
                  src={wechatGroupQR}
                  alt="QR"
                  title={translate({
                    id: 'component.community.Communitypage.card.qr.text',
                    message: 'QR Code of PolyOS WeChat Group',
                    description: 'the description of this QR code',
                  })}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}
